<template>
    <div class="waterfall-wrapper" >
    <ul class="left-waterfall" ref="left">
      <li class="item" v-for="(item, index) in leftItems" v-bind:style=" {height:item.height+'px'}">
      <img :src="item.pimg" alt="">
      <p>{{item.pdesc}}</p>
      <p>{{item.pname}}</p>
      </li>
    </ul>
    <ul class="right-waterfall" ref="right">
      <li class="item" v-for="(item, index) in rightItems" v-bind:style=" {height:item.height+'px'}">
        <img :src="item.pimg" alt="">
        <p>{{item.pdesc}}</p>
        <p>{{item.pname}}</p>
        </li>
    </ul>
  </div>
</template>

<script>
import * as api from "../api/getProlist";
    export default {
        name:'float',
        data () {
        return {
         data: [],   
         leftItems: [], 
        rightItems: [] ,
        page:'6'
        }},
        mounted(){
         // TODO GET DISPLAY_DATA
        //      this.$axios({
        //      url:"http://api.cat-shop.penkuoer.com/api/v1/products",
        //      params:{per:30,page:1}
        //  }).then((dd)=>{
        //      this.data=dd.data.products
        //     this.updateWaterfall()
        //  })
            
        // },

         api.getProd({pclass:"3"}).then(da => {
      this.data = da.data.result;
      console.log(da.data.result);
      this.updateWaterfall();})},
        
        methods: {
         updateWaterfall () {
         const leftHeight = this.$refs.left.clientHeight
         const rightHeight = this.$refs.right.clientHeight
         let item = this.data.shift()
         if (item == null) {
         return
        }
         if (leftHeight >=rightHeight) {
        this.rightItems.push(item)
         }
        else {
        this.leftItems.push(item)
         }
         this.$nextTick(function () {
        this.updateWaterfall()
      })
    }
  },

}

</script>

<style  scoped>
  ul {
    width: 336px
  }
  ul.left-waterfall {
    float: left;
    margin-left:28px; 
  }
 
  ul.right-waterfall {
    float: right;
    margin-right:28px; 
  }
 
  li.item {
    width: 100%;
  }
  li.item img{
      width: 100%
  }
</style>